import {Navigate, useRoutes} from "react-router-dom";
import React, {Suspense, lazy, LazyExoticComponent} from 'react'
import {checkTestB} from "@/router/checkFunction";
import {MenuProps, Spin} from "antd";
import { AppstoreOutlined, MailOutlined, SettingOutlined } from '@ant-design/icons';
import {RouterBeforeEach} from "@/router/RouterBeforeEach";

/**
 * 路由配置说明
 */
export interface AppRoute{
    path:string,
    auth?:boolean,
    component?:LazyExoticComponent<any>,
    children?:Array<AppRoute>,
    //验证函数 返回bool值 用于鉴权  灵感来自antd 手脚架
    accessFun?:Function,
    //重定向
    redirect?:string,
    isMenu?:boolean
    label?:React.ReactNode
    icon?:React.ReactNode
}

const routes:Array<AppRoute> = [
    {
     path:'/',
     redirect:'/login'
    }
    ,
    {
        path:"login",
        auth:true,
        component:lazy(() => import('@/component/login/Login'))
    },
    {
        path: 'layout',
        auth:false,
        component:lazy(() => import('@/component/layout/Layout')),
        children:[
            {
                path:"testB",
                isMenu:true,
                label:"测试B",
                icon:<MailOutlined/>,
                component:lazy(()=>import('@/component/TestB')),
                children:[
                    {
                        icon:<MailOutlined/>,
                        isMenu:true,
                        label:'统计测试',
                        accessFun:checkTestB,
                        path:'count',
                        component:lazy(()=>import('@/containers/count/index'))
                    }
                ]
            },
            {
                icon:<MailOutlined/>,
                path:'testA',
                isMenu:true,
                label:'比赛数据一览表',
                auth:true,
                component:lazy(()=>import('@/component/showDataList/ShowDataList')),
            }
        ]
    },
    {
        path:'405',
        component:lazy(() => import('@/component/common/Common405'))
    }
    ,
    {
        path:'*',
        component:lazy(() => import('@/component/common/Common404'))
    }
]



//根据路径获取路由
const checkAuth = (routers:Array<AppRoute>, path:String)=>{
    for (const data of routers) {
        if (data.path==path) return data
        if (data.children) {
            const res:any = checkAuth(data.children, path)
            if (res) return res
        }
    }
    return null
}

/**
 * 根据路由表生成路由
 * @param routers
 */
const generateRouter = (routers:Array<AppRoute>) => {
    return routers.map((item:any) => {
        if (item.children) {
            item.children = generateRouter(item.children)
        }
        if(item.redirect){
            item.element=<Navigate to={item.redirect}/>
        }else {
            item.element = <Suspense fallback={
                <div style={{
                    position:'relative',
                    width:100,
                    top:'50%',
                    left:'50%',
                    transform: 'translate(-50%,-50%)'
                }}> <Spin size="large"
                          delay={500}
                          indicator={<div>
                            资源加载中!!!
                         </div>}
                    >
                    </Spin>
                </div>
            }>
                {/* 把懒加载的异步路由变成组件装载进去 */}
                <item.component />
            </Suspense>
        }
       
        return item
    })
}

const AppRouters = () => useRoutes(generateRouter(routes))

/***
 * 根据路径获取路由
 * @param path
 */
const checkRouterAuth = (path:string)=>{
    return  checkAuth(routes,path)
}


/**
 * 根据路由节点生成菜单
 */

const generateMenu=(routers:Array<AppRoute>|any)=>{
    let menuItem:any[]=[]
    routers.map((item: { isMenu: any; icon: any; label: any; path: any; children: AppRoute[]; })=>{
        if(item.isMenu){
            let menu:any={};
            menu.icon=item?.icon
            menu.label=item?.label
            menu.key=item.path
            if (item.children){
                let children=generateMenu(item.children);
                if(children.length>0){
                    menu.children=children;
                }
            }
            menuItem.push(menu)
        }
    })
    return menuItem;
}
/**
 * 获取layout节点下的子节点生成菜单树
 */
 const getLayoutNodeToMenu=(routers:Array<AppRoute>)=>{
     let menu=[];
     for(let i=0;i<routers.length;i++){
         if(routers[i].path=='layout'){
             menu= generateMenu(routers[i].children);
             break;
         }
     }
     return menu;
}
const AppMenu=getLayoutNodeToMenu(routes);
export{ AppRouters,checkRouterAuth,AppMenu}